<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英-留言板</title>
    <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<!--导航-->
<nav class="gird-header">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui olive header item" style="font-family: STSong">英</h2>
            <a th:href="@{/}" class="m-item item"><i class="home icon"></i>首页</a>
            <a th:href="@{/types/0/1}" class="m-item item"><i class="clone outline icon"></i>分类</a>
            <a th:href="@{/archives}" class="m-item item"><i class="clock icon"></i>时间轴</a>
            <a th:href="@{/message}" class="active m-item item"><i class="book icon"></i>留言板</a>
            <a th:href="@{/about}" class="m-item item"><i class="info icon"></i>关于我</a>

            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" method="post" target="_blank">
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
                        <input style="color: white" type="text" name="query" placeholder="Search....">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
            <a shiro:notAuthenticated class="right m-item item m-mobile-hide item" th:href="@{/login}">登录/注册</a>
            <a shiro:hasAnyRoles="user" class="right m-item item m-mobile-hide item" th:href="@{/logout}">退出</a>

        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--顶部图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="../static/images/messagebg.jpg" th:src="@{/images/messagebg.jpg}" alt="" class="ui m-bg image"
         style="width: 100%;height: 100%">
    <div class="m-bg-class_cover">
        <div class="ui container" style="position: relative ;bottom: -540px;">
            <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">留言板</div>
            <div class="m-font-size-text-init-title m-margin-top" align="center">虽然只是短暂的擦身，相遇与分别，尽管如此，我却仍然想珍惜这所有的一切
            </div>

        </div>
    </div>
</div>


<!--中间内容-->
<div id="waypoint" class="m-margin- animated fadeIn">
    <div class="ui container m-opacity box-shadow-max">
        <!--                新增留言-->
        <div id="comment-form" class="ui form" shiro:hasAnyRoles="user" >
            <input type="hidden" name="blogId" value="0">
            <input type="hidden" name="comid" value="0">
            <div class="field">
                <textarea name="content" placeholder="请输入评论信息..."></textarea>
            </div>
            <div class="fields">
                <div class="field  m-margin-bottom-small m-mobile-wide">
                    <button id="commentpost-btn" class="ui teal button m-mobile-wide" onclick="postData()"><i
                            class="edit icon" ></i>发布
                    </button>
                </div>
            </div>

        </div>
        <!--留言区-->
        <div class="ui bottom attached m-margin-top">
            <div id="message-container" class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">留言</h3>
                        <div class="comment" th:each="message:${messageList}">
                            <a class="avatar">
                                <img th:if="${message.getUser().getHeadPortrait() eq ''}"
                                     th:src="@{/images/avatar.png}">
                                <img th:if="${message.getUser().getHeadPortrait() ne ''}"
                                     th:src="${message.getUser().getHeadPortrait()}">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <span th:text="${message.getUser().getUsername()}">Matt</span>
                                    <div class="ui mini basic teal left pointing label m-padded-mini">栈主</div>
                                </a>
                                <div class="metadata">
                                    <span class="date" th:text="${message.getCommentTime()}">今天下午 5:42</span>
                                </div>
                                <div class="text" th:text="${message.getContent()}">太赞了！</div>
                                <div class="actions">
                                    <a class="reply"
                                       shiro:hasAnyRoles="user"
                                       th:attr=" data-commentid=${message.cid}, data-commentnickname=${message.getUser().getUsername()} "
                                       onclick="reply(this)">回复</a>
<!--                                    <a class="delete" href="#" onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">删除</a>-->
                                </div>
                            </div>
                            <!--子集留言-->
                            <div class="comments">
                                <div class="comment" th:each="messages:${message.getComments()}">
                                    <a class="avatar">
                                        <img th:if="${messages.getUser().getHeadPortrait() eq ''}"
                                             th:src="@{/images/avatar.png}">
                                        <img th:if="${messages.getUser().getHeadPortrait() ne ''}"
                                             th:src="${messages.getUser().getHeadPortrait()}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${messages.getUser().getUsername()}">小红</span>
                                            <div class="ui mini basic teal left pointing label m-padded-mini">栈主</div>
                                            &nbsp;<span class="m-teal" th:text="'@'+${messages.getComUser().getUsername()}">@ 小白</span>
                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${messages.getCommentTime()}">今天下午 5:42</span>
                                        </div>
                                        <div class="text" th:text="${messages.getContent()}">太赞了！</div>
                                        <div class="actions">
                                            <a class="reply"
                                               shiro:hasAnyRoles="user"
                                               th:attr=" data-commentid=${messages.cid}, data-commentnickname=${messages.getUser().getUsername()} "
                                               onclick="reply(this)">回复</a>
<!--                                            <a class="delete" href="#"-->
<!--                                               onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">删除</a>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

        <br>
        <br>
        <br>

    </div>
</div>


<br>
<br>
<br>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>


<script>

    function postData() {
        var content = $("[name='content']").val();
        if (content === ""){
            layer.msg('已删除!',{icon:1,time:1000});
            alert("为空")
            return false;
        }
        alert("点击")

        $("#message-container").load("/comment",{
            "comid" : $("[name='comid']").val(),
            "aid" : $("[name='blogId']").val(),
            "content" : $("[name='content']").val()
        },function (responseTxt, statusTxt, xhr) {
            clearContent();
        });
    }

    function clearContent() {
        $("[name='content']").val('');
        $("[name='comid']").val(0);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='comid']").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }

</script>
</body>
</html>